.title(@color: @title-color, @bg: @title-bg, @padding: @title-padding) {
  width: 100%;
  color: @color;
  background: @bg;
  padding: @padding;
  height: @title-height;
  line-height: @title-height;
  font-size: @font-size-base;
}

.body(@bg: @body-bg, @padding: @body-padding) {
  background: @bg;
  padding: @padding;
  width: 100%;
}

.footer(@bg: @title-bg, @padding: @title-padding) {
  width: 100%;
  background: @bg;
  padding: @padding;
  height: @footer-height;
  line-height: @footer-height;
}

.modal() {
  .pos-mid-auto();
  border: 1px solid @modal-border;
  border-radius: @border-radius-base;
  overflow: hidden;
  z-index: 100;
  .header {
    .title(@title-color, @modal-header-bg, @modal-header-padding);
    border-bottom: 1px solid @modal-border;
    height: auto;
    line-height: 1;
  }
  .body {
    .body(@modal-body-bg, @modal-body-padding);
    line-height: 1.5;
  }
  .footer {
    .footer(@title-bg, @modal-footer-padding);
    border-top: 1px solid @modal-border;
    height: auto;
    line-height: 1;
    background: #fff;
    text-align: right;
    button + button {
      margin-left: @modal-footer-button-left;
      margin-bottom: 0;
    }
  }
}